<template>
<BasePanel title="单位工程" :one="true">
  <div class="filter">
    <Form :wrapper-col="{ span: 18 }">
      <Row :gutter="[12, 8]">
        <Col :span="15">
          <Input v-model:value="name" placeholder="请输入单体名称" />
        </Col>
        <Col :span="9" class="text-right">
          <Row type="flex" justify="space-between">
            <Button type="primary" ghost @click="handleReset">重置</Button>
            <Button type="primary" @click="handleSearch">查询</Button>
          </Row>
        </Col>
      </Row>
    </Form>
  </div>
  <Table
      :columns="columns"
      :row-key="record => record.unitId"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
  >
    <template #indexSlot="{ index }">{{(pagination.current-1)*10+index+1}}</template>
    <template #name="{ text, record }">
      <router-link target="_blank" :to="{ path: `/monomer/${record.unitId}` }" class="blue" >
        {{ text }}
      </router-link>
    </template>
    <template #leve="{ text }">
      <span v-if="text==='100'">大</span>
      <span v-else-if="text==='101'">中</span>
      <span v-else-if="text==='102'">小</span>
      <span v-else>--</span>
    </template>
  </Table>
</BasePanel>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs, ref } from 'vue';
import {Form, Input, Button, Select, Table, Row, Col} from "ant-design-vue";
import { BasePanel } from '/@/components/panelComponent/index';
import { getPrjUnitApi } from '/@/api/pro';

interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '单体名称', dataIndex: 'subPrjName',},  //slots:({customRender: 'name'})
  { title: '单体编码', dataIndex: 'unitCode' },
  { title: '单体类别', dataIndex: 'unitType' },
  { title: '工程造价(万元)', dataIndex: 'invest' },
  { title: '工程等级', dataIndex: 'prjLevelNum' , slots: ({ customRender: 'leve' })}
]


export default defineComponent({
  components: { BasePanel, Table ,Form, Row, Col,FormItem: Form.Item, Input, Button, Select, Option: Select.Option},
  setup() {
    const applyId = inject('applyId') as string;
    const dataSource = ref<unknown[]>([]);
    const loading = ref<boolean>(true);
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const queryParam = reactive({
      name: '',
      applyId:applyId,
      current:1,
      size:10
    })

    const getTableList = () => {
      loading.value = true;
      getPrjUnitApi(queryParam).then(({ data, success }) => {
        if(success) {
          let { records, size, total } = data;
          dataSource.value = records;
          paginationRef.value.total = total;
          paginationRef.value.pageSize = size;
          loading.value = false;
        }
      })
    }

    const init = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const handleSearch = async () => {
      queryParam.current = 1;
      getTableList();
    }

    const handleReset = () => {
      Object.assign(queryParam,{
        name: "",
        current: 1
      })
      getTableList();
    }

    onMounted(init)

    return {
      queryParam, columns, pagination:paginationRef,dataSource,loading,
      ...toRefs(queryParam), getTableList , handleSearch ,handleReset ,handleTableChange
    }
  },
})
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.filter{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 390px;
}
</style>
